<template>
  <div>
    <div id="right2"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data(){
    return {}
  },
  methods:{
    myEcharts(){
      var chartDom = document.getElementById('right2');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '30%']
        },
        visualMap: {
          type: 'piecewise',
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 0,
              lt: 1,
              color: 'rgba(0, 0, 180, 0.4)'
            },
            {
              gt: 10,
              lt: 11,
              color: 'rgba(0, 0, 180, 0.4)'
            }
          ]
        },
        series: [
          {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
              color: 'red',
              width: 5
            },
            markLine: {
              symbol: ['none', 'none'],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 5 }, { xAxis: 8 }, { xAxis: 10 }]
            },
            areaStyle: {},
            data: [
              ['1月', 200],
              ['2月', 100],
              ['3月', 40],
              ['4月', 40],
              ['5月', 40],
              ['6月', 40],
              ['7月', 60],
              ['8月', 250],
              ['9月', 70],
              ['10月', 60],
              ['11月', 300],
              ['12月', 880]
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    }
  },
  mounted(){
    this.myEcharts()
  }
}
</script>
<style lang="scss" scoped>
#right2{
  // width: 200px;
  height: 200px;
}
</style>